<template>
  <Panel>
    <template #title>
      <p>修改密码</p>
    </template>

    <template #content>
      <el-form
        :model="passForm"
        status-icon
        :rules="rules"
        ref="passForm"
        label-width="100px"
        class="demo-ruleForm"
        size="mini"
      >
        <el-form-item label="原密码" prop="oldPass">
          <el-input
            type="text"
            v-model="passForm.oldPass"
            autocomplete="off"
            @blur="checkOldPass"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pwd">
          <el-input
            type="text"
            v-model="passForm.pwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="checkPass">
          <el-input
            type="text"
            v-model="passForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('passForm')"
            >确定</el-button
          >
          <el-button @click="resetForm('passForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
  </Panel>
</template>

<script>
import { validatePWD, checkPassword, validNewPass } from '@/utils/validate.js'
import { checkOldPass, editPass } from '../../api/users.js'
import local from '../../utils/local.js'

export default {
  data() {
    return {
      passForm: {
        oldPass: '',
        pwd: '',
        checkPass: ''
      },
      rules: {
        oldPass: [{ validator: validatePWD, trigger: 'blur' }],
        pwd: [{ validator: validNewPass(this), trigger: 'blur' }],
        checkPass: [{ validator: checkPassword(this), trigger: 'blur' }]
      },
      // 如果旧密码是正确的，就保存一个状态
      oldPassSata: false
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          if (this.oldPassSata) {
            // 发起请求
            const data = await editPass({
              newPwd: this.passForm.pwd
            })
            // console.log(data)
            if (data.code === 0) {
              // 重新登录需要把token清除掉，再跳转
              local.del('token')
              this.$router.push('/login')
            }
          } else {
            this.$message({
              message: '原密码错误，请再想想吧！！！',
              type: 'error'
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 检查旧密码是否正确
    async checkOldPass(e) {
      const data = await checkOldPass({
        oldPwd: this.passForm.oldPass
      })
      // 将来在修改密码请求的时候，需要知道是否原密码正确
      if (data.code === '00') {
        // 把当前的这个状态给存起来
        this.oldPassSata = true
      } else {
        this.oldPassSata = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-form {
  width: 360px;
}
</style>
